<template>
    <div id="app" style="display: flex;flex-flow:column">
        <div style="display:none" id="download_div"></div>
        <vHead ref="head"></vHead>
        <div style="display: flex;flex-flow:row;flex:1;">
            <vSidebar ref="menu" :index="menu_index"></vSidebar>
            <div class="content" v-if="!loginFromVisible" v-loading="loading === true" element-loading-text="拼命加载中"
                 id="app-content">
                <transition name="move" mode="out-in">
                    <router-view></router-view>
                </transition>
            </div>
        </div>
        <el-dialog title="请登录" class="centerDialog" :visible.sync="loginFromVisible" :close-on-click-modal="false"
                   :showClose="false"  :append-to-body="true">
            <el-form :model="loginInfo" :rules="rules" ref="loginInfo" label-width="85px">
                <el-form-item label="用户名：" prop="loginName">
                    <el-input v-model.trim="loginInfo.loginName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password" v-model.trim="loginInfo.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="验证码：" prop="validateCode">
                    <el-input v-model.trim="loginInfo.validateCode" placeholder="请输入验证码"
                              @keyup.enter.native="login()"></el-input>
                    <img class="validate-img" id="validateCodeImage" style="width:200px;margin-top:20px;"
                         :src="loginInfo.validateImg"
                         @click="img_click"/>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="login()">登录</el-button>
                </div>
            </el-form>
        </el-dialog>
        <image-edit></image-edit>
    </div>
</template>

<script>
    import header from './components/Header.vue'
    import sidebar from './components/Sidebar.vue'

    export default {
        data() {
            return {
                menu_index: 0,
                loading: false,
                user: {name: ""},
                menus: [],    //菜单
                corp: {logo: {url: ""}, name: ""},
                permission: [],
                popData: {tags: [], allProducts: [], products: []},  //弹出数据
                cartNumber: 0, //购物车数量

                authPermission: false,
                authPermissionErrorMsg: "",
                //登录使用的用户名密码。
                loginInfo: {
                    loginName: '',
                    password: '',
                    validateImg: '',
                },
                rules: {
                    loginName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    validateCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                },
                loginFromVisible: false,
            };
        },
        components: {
            vHead: header,
            vSidebar: sidebar
        },
        created() {
            jv.main = this;

            Object.defineProperty(this, "download_url", {
                set(url) {
                    console.log(url);
                    if (!url) return;
                    var div = document.getElementById("download_div");
                    div.innerHTML = "";
                    div.innerHTML = "<iframe src=\"" + url + "\" />";
                }
            });
        },

        mounted() {
            this.loginInfo.loginName = window.localStorage.getItem('userName');
            this.img_click();

            // this.$nextTick(it => {
            //     if (document.body.clientWidth < 800) {
            //         document.body.style.height = "auto";
            //         document.querySelector("#app>div>.sidebar").parentNode.style.flexFlow = "column";
            //     }
            // })
        },
        methods: {
            open_download_url(url) {
                if (!url) return;
                var div = document.getElementById("download_div");
                div.innerHTML = "";
                div.innerHTML = "<iframe url=\"" + url + "\"/>";
            },
            menu(index) {
                this.menu_index = index;
            },
            //登陆
            login() {
                this.$refs['loginInfo'].validate((valid) => {
                    if (valid) {
                        jv.post("/open/login", this.loginInfo).then(res => {
                            window.localStorage.setItem('userName', this.loginInfo.loginName);
                            this.loadData();
                        }, res => {
                            this.img_click();
                        });
                    } else {
                        return false
                    }
                })
            },
            img_click() {
                return this.loginInfo.validateImg = (window.Server_Host + "/open/getValidateCodeImage?_=" + Math.random().toString().slice(-8));
            },
            //重置
            // reset_password() {
            //     jv.prompt("请输入登录名").then(res => {
            //         this.$http.post("/user/forgetPassword", {loginName: res.value})
            //             .then(function (data) {
            //                 jv.info("重置密码申请已成功发送，请联系管理员。");
            //             })
            //     })
            // },
            setJson(json) {
                window.Upload_Host = json.uploadHost;
                Object.assign(this, json);
            },
            authUrl(url) {
                this.authPermission = true;

                let hash = window.location.hash;
                if (!hash) {
                    return;
                }

                url = url || hash.substring(1);

                if (url == "/") return;
                if (url == "/error") return;
                if (url == "/noPermissoin") return;
                if (url == "/info/corp" && this.user.admin) return;

                if (jv.main.corp.locked) {
                    this.authPermissionErrorMsg = jv.main.corp.lockedRemark || "该企业被禁止访问";
                    this.authPermission = false;
                    return false;
                }

                if (jv.main.$router.options.permission &&
                    (jv.main.$router.options.permission.indexOf(url) >= 0) &&
                    ((jv.main.permission || []).indexOf(url) < 0)) {
                    console.warn("没有权限:" + url)
                    this.authPermissionErrorMsg = "没有权限";
                    this.authPermission = false;
                    return false;
                }

                return;
            },

            add2AllProduct(product) {
                if (!product || !product.id) return;
                if (this.popData.allProducts.last(it => it.id == product.id)) return;
                this.popData.allProducts.push(product);
            },
            addTag(tagInfo) {
                if (!tagInfo || !tagInfo.tags || !tagInfo.tags.length) return;
                var item = this.popData.tags.last(it => it.action == tagInfo.action)

                if (!item) {
                    this.popData.tags.push({action: tagInfo.action, tags: tagInfo.tags});
                    return;
                }

                var leftTags = tagInfo.tags.filter(it => item.tags.indexOf(it));
                if (leftTags.length) {
                    Array.prototype.push.apply(item.tags, leftTags);
                }
            },
            addUser(user) {
                if (!user || !user.id) return;
                if (this.popData.handlers.last(it => it.id == user.id)) return;
                this.popData.handlers.push(user);
            },
            loadData() {
                // jv.post("/loginInfo/getMine").then(res => {
                //     var json = res.data.data;
                //
                //     this.user = json;
                //     this.setJson(json);
                //
                //     this.loginFromVisible = false;
                //
                //     if (this.authUrl() === false) {
                //         return;
                //     }
                // });
            }
        },
        watch: {
            loginFromVisible(value) {
                if (value) {
                    this.img_click();
                }
            },
        }
    }

</script>

<style>
    @import "./assets/pzx-icon.css";
</style>

<style lang="scss" scoped>
    .centerDialog {
        .el-dialog {
            max-width: 400px;
        }
    }

    .content {
        padding: 20px;
        box-sizing: border-box;
        overflow-y: scroll;
        background-color: #ffffff;
        flex: 1;
    }

    .move-enter-active, .move-leave-active {
        transition: opacity 1.1s;
    }

    .move-enter, .move-leave {
        opacity: 0;
    }

    .login-btn {
        text-align: right;
    }

    .all-icon {
        width: 16px;
        height: 16px;
        display: inline-block;
        background: url("./assets/all_icon.png");
    }

    .el-date-editor--daterange.el-input {
        width: 230px;
    }

    .el-tabs__header {
        margin: 0;
    }

    .img_text {
        textarea {
            margin-top: 4px;
            max-height: 200px;
        }
    }
</style>

